<template>
	<view class="state Han">
		<view class="state_head devideLine">
			<view class="cancel md4Text" @click="deleteState">
				取消
			</view>
			
			<view class="title smTitle">
				求职状态
			</view>
			
			<view class="confirm md4Text mblue" @click="chooseState">
				确定
			</view>
		</view>
		
		<view class="stateList">
			<view class="item smTitle lgrey" v-for="(state,stateIndex) in stateList" :key="stateIndex" :class="{stateActive:stateIndex==ins}" @click="getState(stateIndex)">
				{{state.state}}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			stateList:[
				{state:'离职-随时到岗1'},
				{state:'离职-随时到岗2'},
				{state:'离职-随时到岗3'},
				{state:'离职-随时到岗4'},
				{state:'离职-随时到岗5'}
			],
			ins:2
		};
	},

	methods: {
		getState(index){
			this.ins = index;
		},
		deleteState(){
			this.ins = -1;
		},
		chooseState(){
			if(this.ins !== -1){
				this.$emit('getState',this.stateList[this.ins])
			}
			
		}
	}
};
</script>

<style scoped lang="less">
	.state{
		width: 100vw;
		height: 570upx;
		position: fixed;
		z-index: 1001;
		bottom: 0;
		background-color: #FFFFFF;
		padding: 0 36upx;
		
		.state_head{
			width: 100%;
			height: 120upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		.stateList{
			width: 100%;
			height: calc(100% - 120upx);
			overflow-y: auto;
			padding-top: 43upx;
			.item{
				width: 100%;
				height: 64upx;
				line-height: 64upx;
				text-align: center;
				font-weight: bold;
			}
			.stateActive{
				background: #F5F5F5;
				color: #333333;
			}
		}
	}
</style>
